<template>
  <div class="login-box">
    <el-form ref="form" :rules="rules" label-position="left" :model="addForm" label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input maxlength="10" v-model="addForm.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input maxlength="10" v-model="addForm.password" placeholder="请输入密码" type="password" />
      </el-form-item>
      <el-form-item label="验证码" prop="captcha_code">
        <el-input maxlength="10" v-model="addForm.captcha_code" placeholder="请输入验证码">
          <div slot="append" class="code-pic">
            <img :src="codePic" alt="" @click="getCode">
          </div>
        </el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="submit" class="none-type">登录</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { verificationCode, login } from '@/api/login'
import { setCookie } from '@/utils/tool'
import { encrypt } from '@/utils/rsaEncrypt'
export default {
  data () {
    return {
      addForm: {
      },
      codePic: '',
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        captcha_code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      }
    };
  },
  async created () {
    this.getCode()
  },
  mounted () {
    
  },
  destroyed () {
    
  },
  methods: {
    async getCode () {
      let res = await verificationCode()
      this.addForm.captcha_key = res.data.uuid
      this.codePic = res.data.img
    },
    submit () {
      let data = {
        client_id: 'platform',
        client_secret: encodeURIComponent(encrypt('123456'))
      }
      if (this.navActive == 0) {

        if (!this.formLogin.username) {
          this.$message.error('请输入用户名')
          return false
        }
        if (!this.formLogin.password) {
          this.$message.error('请输入密码')
          return false
        }
        if (!this.formLogin.authCode) {
          this.$message.error('请输入验证码')
          return false
        }
      }

      data.grant_type = 'password'
      data.password = encodeURIComponent(encrypt(this.addForm.password))
      data.username = this.addForm.username
      //data.captcha_key = this.addForm.captcha_key
      //data.captcha_code = this.addForm.captcha_code
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let [ err, res ] = await this.$awaitWrap(login({
            ...data
          }))
          if ( err ) {
            this.getCode()
            return
          }
          setCookie('login_ticket', `Bearer ${res.data.access_token}`)
          setCookie('refresh_token', res.data.refresh_token)
          this.$router.push({
            path: '/'
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login-box{
  width: 420px;
  margin: 120px auto 0;
  padding: 30px;
  border: 1px solid #ccc;
}
.code-pic{
  img{
    display: block;
    // width: 120px;
    height: 36px;
  }
}
</style>